import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { useI18n } from '@/hooks/web/useI18n';

const { t } = useI18n();
export const columns: BasicColumn[] = [
  {
    title: 'permissionId',
    dataIndex: 'permissionId',
    width: 50,
  },
  {
    title: t('sys.menu.columns.title'),
    dataIndex: 'title',
    width: 50,
    customRender: ({ text }) => {
      return t(text);
    },
  },
  {
    title: t('sys.menu.columns.path'),
    dataIndex: 'path',
    width: 50,
  },
  {
    title: t('sys.menu.columns.name'),
    dataIndex: 'name',
    width: 50,
  },

  {
    title: t('sys.menu.columns.orderNo'),
    dataIndex: 'orderNo',
    width: 50,
    // customRender: ({ text }) => text?.orderNo || '',
  },
  {
    title: t('sys.menu.columns.type'),
    dataIndex: 'type',
    width: 50,
  },
];

const isDir = (type: string) => type === '0';
const isMenu = (type: string) => type === '1';
const isButton = (type: string) => type === '2';

export const searchFormSchema: FormSchema[] = [
  {
    field: 'meta',
    label: t('sys.menu.columns.title'),
    component: 'Input',
    colProps: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6 },
  },
];

export const formSchema: FormSchema[] = [
  {
    field: 'title',
    label: t('sys.menu.columns.title'),
    component: 'Input',
    required: true,
  },
  {
    field: 'name',
    label: t('sys.menu.columns.name'),
    component: 'Input',
    required: true,
  },
  {
    field: 'path',
    label: t('sys.menu.columns.path'),
    component: 'Input',
    required: true,
  },
  {
    field: 'component',
    label: 'component',
    component: 'Input',
    required: true,
  },
  {
    field: 'redirect',
    label: 'redirect',
    component: 'Input',
  },
  {
    field: 'orderNo',
    label: t('sys.menu.columns.orderNo'),
    component: 'InputNumber',
    required: true,
  },
];
